<template>
  <div id="nav">
    <router-link 
      v-for="item,index in imgTop" 
      :key="index" 
      :to="handleTarget(pathnames,index)"
    >
        <img :src="item" alt="" />
        <img :src="imgDown[index]" alt="" />
        <span>{{targetNames[index]}}</span>
    </router-link>
  </div> 
</template>

<script>
export default {
  data(){
      return{
        imgTop:[
            "https://mfs.ys7.com/mall/343d58a845d19a70775a512143f53d8b.png",
            "https://mfs.ys7.com/mall/aa58276ac5ce01255e9d830c5f3bdc20.png",
            "https://mfs.ys7.com/mall/9277c62d0179ff9cda90a6aa00791956.png",
            "https://mfs.ys7.com/mall/7f4118c5c0806303173057edc9c3d7f9.png",
            "https://mfs.ys7.com/mall/0ef0149c4f370fc451ec060b243bb902.png"
        ],
        imgDown:[
            "https://mfs.ys7.com/mall/2d10f8d26da77c7a74ecb181a97746b4.png",
            "https://mfs.ys7.com/mall/e24bc7f935e014d3a7c130e32b3b9f86.png",
            "https://mfs.ys7.com/mall/9277c62d0179ff9cda90a6aa00791956.png",
            "https://mfs.ys7.com/mall/7f4118c5c0806303173057edc9c3d7f9.png",
            "https://mfs.ys7.com/mall/11f950dd727a7834e08af4b32c200e5c.png"
        ],
        pathnames:['/home','/list','/discover','/shopping','/personal'],
        targetNames:['首页','分类','发现好货','购物车','我的商城'],
      }
    },
  methods: {
    handleTarget(arg,i) {
      this.oldIndex = i;
      return this.$route.path == arg[i] ? '' : arg[i];
    }
  },
};
</script>

<style lang="less" scoped>
#nav {
  padding-top: .04rem;
  height: 0.44rem;
  width: 100%;
  background: #f8f8f8;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  box-shadow: 0px -3px 8px #d3d2d2;
  z-index: 99;
}
#nav a {
  display: inline-block;
  width: 18%;
  text-align: center;
}
#nav a img {
  width: 24px;
  height: 24px;
  /* display: block; */
  text-align: center;
}
#nav a span {
  display: block;
  font-size: 12px;
  color: #626268;
}
#nav a img:nth-child(2){
    display: none;
}
#nav .router-link-active img:nth-child(1){
    display: none;
}
#nav .router-link-active img:nth-child(2){
    display: inline-block;
}
#nav .router-link-active span {
  color: #e7a16d;
}
</style>